<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="/common/css/mui.min.css" rel="stylesheet" />
		<style>
		    html{font-size:calc(100/1080*100vw);}
			#header{
				height: 1.6rem;
				background-color: #000000;
			}
			#header img{
				width: 0.72rem;
				margin-top: 0.44rem;
				margin-left: 0.72rem;
			}
			#header h1{
				color: #ffffff;
				font-size: 0.5rem;
				line-height: 1.6rem;
			}
			.mui-content{
				background: #FFFFFF;
				/*float: left;*/
			}
			.jindu{
				width: 5rem;
				text-align: center;
				height: 0.56rem;
				font-size: 0.6rem;
				margin: 0.8rem auto 0.2rem;
				
			}
			.minge{
				width: 5rem;
				text-align: center;
				height: 0.32rem;
				font-size: 0.3rem;
				margin: 0rem auto;
				
			}
			.btn{
				width: 4rem;
				height: 1rem;
				margin: 1.8rem 0.5rem 1.5rem 1rem;
				background-color: #AAAAAA;
				font-size: 0.44rem;
				color: #DDDDDD;
				border-radius: 0.2rem;
			}
			.btn1{
				width: 4rem;
				height: 1rem;
				background-color: #111111;
				font-size: 0.44rem;
				margin: 1.8rem 0.5rem 1.5rem 0rem;
				color: #ffffff;
				border-radius: 0.2rem;
			}
			.order{
				margin: 1.2rem auto 0.2rem;
			}
			.order input{
				width: 9.4rem;
				height: 1rem;
				font-size: 0.3rem;
				border: 1px solid #aaaaaa;
				color: #333333;
				display: block;
				margin: 0.3rem auto 0.2rem;
				border-radius: 0rem;
			}
			.jiami{
				width: 9.2rem;
				height: 1.5rem;
				border:none;
				border-bottom: 1px solid #AAAAAA;
				border-top: 1px solid #AAAAAA;
				display: block;
				margin: 0.8rem auto;
				font-size: 0.35rem;
				line-height: 1.5rem;
			}
			.jiami img{
				width: 0.5rem;
				height: 0.44rem;
				float: left;
				margin-top: 0.5rem;
				margin-left: 1.2rem;
				margin-right: 0.3rem;
			}
			.shuoming{
				width: 9.4rem;
				height: 1rem;
				margin: 0.5rem auto;
				color: #333333;
				font-size: 0.5rem;
			}
			.shuoming .liu{
				font-size: 0.4rem;
			}
			.shuoming .lu{
				font-size: 0.3rem;
			}
			.hidden_box{
				border: 1px solid #FFFFFF;
				width: 10.8rem;
				height: 19.4rem;
				background-color: rgba(169,169,169,0.7);
				text-align: center;
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				
			}
			.hidden_box .xiaoqie{
				/*border: 1px solid red;*/
				font-size: 0.5rem;
				margin-top: 0.5rem;
			}
			.hidden_box .middle_liu{
				border: 1px solid #FFFFFF;
				width: 8.6rem;
				height: 7rem;
				margin: 6rem auto;
				background-color: #FFFFFF;
				border-radius: 0.2rem;
			}
			.hidden_box .middle_liu hr{
				width: 80%;
			}
			.hidden_box .wenzi{
				width: 3.77rem;
				height: 2.41rem;
				font-size: 0.3rem;
				float: left;
				margin-top: 0.5rem;
				margin-left: 1.2rem;
			}
			.hidden_box button{
				width: 3.69rem;
				height: 0.8rem;
				background-color: #010101;
				color: #ffffff;
				font-size: 0.3rem;
				float: left;
				margin-top: 0.3rem;
				margin-left: 1.2rem;
			}
			.hidden_box .people{
				background-image: url(/common/image/people@2x.png);
				width: 1.78rem;
				height: 3.08rem;
				margin-top: 0.9rem;
				margin-left: 6rem;
				background-size: 100%;
				
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" id="header">
			<img src="/common/image/logo@2x.png" alt="LOGO"/>
			<h1 class="mui-title">BLACK CENTUEY</h1>
	    </header>
	    <div class="mui-content">
	    	<div class="jindu">订单确认</div>
	    	<div class="minge">Order Confirm</div>
	    	<div class="order">
	    		<input type="text" readonly="readonly" value="精英会籍 + 随机号码 + 不定制姓名  = 199元"/>
	    		<input type="text" id="name" placeholder="填写收卡人的姓名"/>
	    		<input type="text" id="phone" placeholder="填写收卡人的联系电话" />
	    		<input type="text" id="phone1" placeholder="请再次填写确认电话"/>
	    		<input type="text" id="city" placeholder="请选择您的收件城市信息"/>
	    		<input type="text" id="address" placeholder="填写您的详细收件地址"/>
	    		<input type="text" id="remark" placeholder="备注(选填)"/>
	    	</div>
	    	<div class="jiami">
	    	    <img src="/common/image/jiami@2x.png" />
	    	    <span>您的个人信息将由MD5技术全程加密</span> 
	    	</div>
	    	<div class="shuoming">
	    		快递说明<br />
	    		<span class="liu">货到付款由京东物流或顺丰速运配送。</span><br /><br />
	    		<span class="lu">我已阅读并同意《世纪黑卡服务章程》</span>
	    	</div>
	    	<button class="btn">上一步</button>
		    <button class="btn1">立即付款</button>
	    </div>
	    <div class="hidden_box">
	    	<div class="middle_liu">
	    		<div class="xiaoqie">货到付款温馨提示</div>
	    		<hr />
	    		<div class="wenzi">您已成功申请世纪黑卡，并选择货到付款方式，您的黑卡将会由顺丰速运送货上门，共计：199元，请准备好相应的办理金额。</div>
	    		<div class="people"></div>
	    		<button class="queren">我会签收，确认提交</button>
	    	</div>
	    </div>
		<script src="/common/js/mui.min.js"></script>
		<script src="/home/js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();

				//跳转申请页3
	      		mui('.btn')[0].addEventListener('tap',function(){
						mui.openWindow( {
						url: 'shenqing3.html',
						id: 'shenqing3'
					} )
				} )
	      		
	      		mui('.btn1')[0].addEventListener('tap',function(){
					//$('.hidden_box').show(); 	
					var name = document.getElementById('name').value;
					var phone = document.getElementById('phone').value;
					var phone1 = document.getElementById('phone1').value;
					var city = document.getElementById('city').value;
					var address = document.getElementById('address').value;
					var remark = document.getElementById('remark').value;
					
					if(name == ''){mui.toast('请输入您的姓名');return;}
					if(phone == '' || phone1 == '' ){mui.toast('请输入手机号');return;}
					if(phone.length<11||phone.length>11){mui.toast('电话号长度不对，请重新输入');return;}
					var reg = /^1[3|4|5|7|8]\d{9}$/;
					if(!reg.test(phone)){mui.toast('请输入正确格式的手机号');return;}
					if(phone != phone1){mui.toast('两次输入的手机号不一致');return;}
					if(city == ''){mui.toast('请选择您所在的城市');return;}
					if(address == ''){mui.toast('请填写您的详细地址');return;}
					
					localStorage.setItem('phone', phone);
					//保存到数据库
					var  arr={name:name,phone:phone,city:city,address:address,remark:remark};
					$.ajax('http://blackcentury.91fintec.com/index.php/admin/Index/saveuser',{
					    data:arr,
						type:'POST',
						success:function(data){
							data=JSON.parse(data);
						}
					})
					
					mui.openWindow( {
						url: 'shenqing5.html',
						id: 'shenqing5' 
					 } ) 
					
					
				} )
	      		
	      		<!-- mui('.queren')[0].addEventListener('tap',function(){ -->
						<!-- //获取值  正则验证 -->
						
	      		<!-- } ) -->
	      		
	      		<!-- mui('.hidden_box')[0].addEventListener('tap',function(){ -->
					<!-- $('.hidden_box').hide();			 -->
	      		<!-- } ) -->
		</script>
	</body>

</html>